<template>
  <div>
    <!-- 
        右侧弹出  
        click-overlay: 点击遮罩层时触发。 
        close-on-click-overlay:是否在点击遮罩层后关闭
        lock-scroll 是否锁定背景滚动, 默认是true
    -->
    <van-popup
      v-model:show="showRight"
      position="right"
      :style="{ width: '90%', height: '100%' }"
      @click-overlay="onClickOverlay"
      :close-on-click-overlay="!showRight"
      :lock-scroll="show"
    >
      <!-- 吸附效果 -->
      <van-sticky :offset-top="0">
        <van-nav-bar
          title="帅选"
          right-text="清除选择"
          left-arrow
          :border="false"
          @click-left="onClickOverlay"
          @click-right="onClickRight"
        >
          <template #left>
            <div class="nav-left">
              <img
                src="https://cdn-gdcws-imgs.gdcws.cn/demo/20240130/close.png"
              />
            </div>
          </template>
        </van-nav-bar>
      </van-sticky>

      <DrawerSubView title="性别" :item-list="sexList"></DrawerSubView>

      <DrawerSubView title="季节" :item-list="seasonList"></DrawerSubView>

      <DrawerSubView title="尺码" :item-list="sizeList"></DrawerSubView>

      <DrawerSubView title="鞋码" :item-list="shoesList"></DrawerSubView>
      <DrawerSubView title="鞋码" :item-list="shoesList"></DrawerSubView>
      <DrawerSubView title="鞋码" :item-list="shoesList"></DrawerSubView>
      <DrawerSubView title="鞋码" :item-list="shoesList"></DrawerSubView>
      <DrawerSubView title="鞋码" :item-list="shoesList"></DrawerSubView>

      <div class="price-view">
        <div>价格区间</div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16px;
          "
        >
          <van-field v-model="minPrice" type="number" placeholder="最低价" />
          <div style="width: 50px">
            <div class="line"></div>
          </div>
          <van-field v-model="maxPrice" type="number" placeholder="最高价" />
        </div>
      </div>

      <van-divider style="margin: 8px 16px" />
      <br />

      <div class="bottom-view">
        <van-button color="#7232dd" block>完成</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DrawerSubView from "@/views//category/components/DrawerSubView.vue";

defineProps({
  show: {
    typeo: Boolean,
  },
});

const minPrice = ref("");
const maxPrice = ref("");
const showRight = true;

const emit = defineEmits(["clickoverlay"]);
// 点击蒙层 关闭X
const onClickOverlay = () => {
  emit("clickoverlay", "0");
};
// 清除选择
const onClickRight = () => {};

// 性别
const sexList = [
  {
    title: "女孩",
    select: false,
  },
  {
    title: "男孩",
    select: false,
  },
];

// 季节
const seasonList = [
  {
    title: "2023秋冬",
    select: false,
  },
  {
    title: "2023春夏",
    select: false,
  },
  {
    title: "2022秋冬",
    select: false,
  },
  {
    title: "2022春夏",
    select: false,
  },
  {
    title: "2021秋冬",
    select: false,
  },
  {
    title: "2021春夏",
    select: false,
  },
  {
    title: "2019秋冬",
    select: false,
  },
  {
    title: "2019春夏",
    select: false,
  },
];

// 尺码
const sizeList = [
  {
    title: "3 month",
    select: false,
  },
  {
    title: "6 month",
    select: false,
  },
  {
    title: "9 month",
    select: false,
  },
  {
    title: "12 month",
    select: false,
  },
  {
    title: "18 month",
    select: false,
  },
  {
    title: "2 year",
    select: false,
  },
  {
    title: "3 year",
    select: false,
  },
  {
    title: "4 year",
    select: false,
  },
  {
    title: "5 year",
    select: false,
  },
  {
    title: "6 year",
    select: false,
  },
  {
    title: "7 year",
    select: false,
  },
  {
    title: "8 year",
    select: false,
  },
  {
    title: "9 month",
    select: false,
  },
  {
    title: "10 year",
    select: false,
  },
  {
    title: "12 year",
    select: false,
  },
  {
    title: "14 year",
    select: false,
  },
];

// 鞋码
const shoesList = [
  {
    select: true,
    title: "13",
  },
  {
    select: false,
    title: "14",
  },
  {
    select: false,
    title: "15",
  },
  {
    select: false,
    title: "16",
  },
  {
    select: false,
    title: "17",
  },
];
</script>

<style lang="scss" scoped>
// 导航左按钮
.nav-left {
  img {
    width: 16px;
    height: 16px;
  }
}

.price-view {
  display: flex;
  margin: 1rem 0.6rem;
  flex-direction: column;
  .van-field {
    width: 50%;
    text-align: center;
    font-size: 12px;
    background-color: #f6f7f9;
    padding: 8px 0;
    height: 40px;
  }

  ::v-deep(.van-field__control) {
    text-align: center;
  }

  .van-field ::placeholder {
    /* 选取输入框的提示文字 */
    text-align: center; /* 水平居中 */
    font-size: 12px;
  }

  .line {
    margin-left: 10px;
    height: 1px;
    width: 1rem;
    background-color: #666666;
  }
}

.bottom-view {
  // position: absolute; //固定定位
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
